<template>
  <div :data-bar-cid="cid" class="chart" />
</template>

<script>
export default {
  props: {
    yData: {
      type: [String],
      required: true
    },
    cid: {
      type: [String],
      required: true
    }
    // name: {
    //   type: [String],
    //   required: true
    // }
  },
  data() {
    return {
      y: [],
      nameList: ['家庭接纳-慈爱', '家庭接纳-随意', '家庭回避-忽视', '家庭回避-拒绝', '家庭过度关心-过度保护', '家庭过度关心-过度要求']
    }
  },
  watch: {
    yData(newData) {
      this.setOptions(JSON.parse(newData), this.name)
    }
  },
  mounted() {
    this.chart = this.$chart.init(this.$el)
    this.setOptions(JSON.parse(this.yData))
  },
  methods: {
    setOptions(newData) {
      this.chart.setOption(
        {
          title: {
            text: '',
            left: 'center'
          },
          label: {
            normal: {
              show: false
            }
          },
          toolbox: {
            show: false
          },
          lableLine: {
            normal: {
              show: false
            }
          },
          tooltip: {
            // show: false,
            trigger: 'item',
            formatter: '{b} : {c} ({d}%)'
          },
          legend: {
            // show: false,
            // orient: 'vertical',
            // top: 'middle',
            bottom: 10,
            left: 'center',
            formatter: function(name) {
              return name
            },
            data: this.nameList
          },
          series: [
            {
              type: 'pie',
              radius: '65%',
              // roseType: 'radius',
              center: ['50%', '50%'],
              selectedMode: 'single',
              data: newData.map((v, i) => {
                return {
                  name: this.nameList[i],
                  value: v
                }
              }),
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
                // normal: {
                //   color: new this.$chart.graphic.LinearGradient(
                //     0, 1, 1, 0,
                //     [
                //       { offset: 0, color: 'rgba(194,233,251,1)' },
                //       { offset: 1, color: 'rgba(161,196,253,1)' }
                //     ]
                //   )
                // }
              }
            }
          ]
        }
      )
    }
  }
}
</script>

<style scoped>
  .chart {
    margin: auto;
    width: 480px;
    height: 480px;
  }
</style>
